<template>
  <div class="my-task" @scroll="loading && scrollEvent($event)">
    <nav-header
      :headerTitle="'我的任务'"
      :navBgColor="'#fff'"
      :isNext="false"
      :isNavBack="true"
      :isNedMsg="false"
    ></nav-header>
    <div class="content">
      <div class="tabs">
        <van-tabs
          v-model="activeName"
          type="line"
          :border="false"
          title-active-color="#FF2525"
          title-inactive-color="#303133"
          @click="clickTag"
        >
          <van-tab
            v-for="(item, index) in tabList"
            :title="item.name"
            :key="'tab' + index"
            :name="index"
          >
            <!-- @load="getUserFlowForwardInfo(index)" -->
            <!-- :immediate-check="false" -->
            <div class="task-list">
              <van-list
                v-model="loading"
                :finished="finished"
                @load="getUserFlowForwardInfo(index)"
                finished-text="没有更多了"
                :error.sync="error"
                error-text="请求失败，点击重新加载"
              >
                <task-list-item
                  v-for="(taskItem, taskIndex) of taskList"
                  :key="'tl' + taskIndex"
                  :listItem="taskItem"
                  :pageName="'myTask'"
                  @acquireTask="clickTaskBtn"
                  @tapToDetail="clickTapToDetail"
                ></task-list-item>
              </van-list>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import mixin from '@/utils/mixin'
import { Tab, Tabs, List } from 'vant';
import NavHeader from '@/components/NavHeader'
import TaskListItem from '@/components/TaskListItem'

Vue.use(Tab).use(Tabs).use(List)

export default {
  name: 'myTask',
  mixins: [mixin],
  data () {
    return {
      // '进行中','已完成','已失败'
      tabList: [
        { name: '进行中', disabled: false },
        { name: '已完成', disabled: false },
        { name: '已失败', disabled: false }
      ],
      taskList: [],
      inuniqueId: '',
      activeName: '0',
      // 监听滚动数据
      pageNum: 1,
      prePageNum: 0,
      pageSize: 10,
      finished: false,
      loading: false,
      error: false,
      disabled: false,
      // tag: true
    }
  },
  created () {
    this.getInuniqueId()
    this.getActiveName()
  },
  mounted () {
    // this.getUserFlowForwardInfo(this.activeName)
  },
  methods: {
    // 获取用户uniqueId
    getInuniqueId () {
      if (this.isNull(window.localStorage.getItem('uniqueIdByInfluencer'))) {
        this.inuniqueId = ''
      } else {
        this.inuniqueId = localStorage.getItem('uniqueIdByInfluencer')
      }
    },
    getActiveName () {
      if (sessionStorage.getItem('activeName') !== null) {
        this.activeName = sessionStorage.getItem('activeName')
      } else {
        this.activeName = '0'
      }
      // console.log(sessionStorage.getItem('activeName'))
    },
    // 点击任务按钮实现功能方法
    clickTaskBtn (currentAdId) {
      this.$http.post('/flowForward/getTaskInfoByForwardId', {
        uniqueId: this.inuniqueId,
        adId: currentAdId
      }).then(
        res => {
          let resData = res.data
          sessionStorage.setItem('taskItemString', JSON.stringify(resData))
          sessionStorage.setItem('adIdByInfluencer', resData.id)
          if ([2, 4, 5, 6].includes(resData.forwardAuditStatus)) {
            this.$router.push({
              path: '/infMine/msgState',
              query: {
                inuniqueId: this.inuniqueId,
                adId: currentAdId
              }
            })
          } else {
            this.$router.push({
              path: '/infIndex/taskCourse',
              query: {
                inuniqueId: this.inuniqueId,
                adId: currentAdId
              }
            })
          }
        },
        err => {
          console.log(err)
        }
      )
    },
    clickTapToDetail (currentAdId) {
      this.$http.post('/flowForward/getTaskInfoByForwardId', {
        uniqueId: this.inuniqueId,
        adId: currentAdId
      }).then(
        res => {
          let resData = res.data
          sessionStorage.setItem('taskItemString', JSON.stringify(resData))
          sessionStorage.setItem('adIdByInfluencer', currentAdId)
          // 我的任务标签页面停留
          if ([4, 5, 6].includes(resData.forwardAuditStatus)) {
            sessionStorage.setItem('activeName', '2')
          } else if (resData.forwardAuditStatus === 2) {
            sessionStorage.setItem('activeName', '1')
          } else {
            sessionStorage.setItem('activeName', '0')
          }
          // 跳转到详情页
          this.$router.push({
            path: '/infIndex/taskDetail',
            query: {
              inuniqueId: this.inuniqueId,
              adId: currentAdId
            }
          })
        },
        err => {
          console.log(err)
        }
      )


    },
    // 点击标签事件，获取分页list
    clickTag (index, title) {
      // sessionStorage.setItem('activeName', index)
      // window.location.reload()
      // this.immediateCheck = true;
      (this.tabList).forEach(ele => {
        ele.disabled = true
      })

      this.pageNum = 1
      this.prePageNum = 0
      this.getUserFlowForwardInfo(index)
      this.taskList = []
      this.finished = false
      this.loading = false
      this.error = false
    },

    // 获取任务列表
    getUserFlowForwardInfo (statusCode) {
      if (this.finished) {
        return false;
      }
      if (this.pageNum === this.prePageNum) {
        this.loading = false
        return false
      }
      this.prePageNum = this.pageNum
      this.$http.post('/flowForward/getUserFlowForwardInfo', {
        uniqueId: this.inuniqueId,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        status: statusCode
      }).then(
        res => {
          let resData = res.data
          resData.items.forEach(item => {
            item.id = item.adId
          });
          this.taskList = this.taskList.concat(resData.items);
          // console.log(this.pageNum)

          this.pageNum++;
          this.loading = false

          // console.log(this.pageNum)
          if (resData.pages < this.pageNum) {
            this.finished = true
          }
          (this.tabList).forEach(ele => {
            ele.disabled = false
          })
        },
        err => {
          this.error = true
          console.log(err)
        }
      )
    }
  },
  components: {
    NavHeader,
    TaskListItem
  }
}
</script>

<style scoped lang="scss">
@import '~@/assets/css/common.scss';
.my-task {
  width: 100%;
  height: 100%;
  padding: 0 32px;
  box-sizing: border-box;
  .content {
    width: 100%;
    height: 100%;
    margin-top: 88px;
    position: relative;
    .tabs {
      & /deep/ .van-tabs__wrap {
        position: fixed;
        top: 88px;
        .van-ellipsis {
          font-size: 32px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          .van-tabs__line {
            width: 54px;
          }
        }
      }
      .task-list {
        margin-top: 24px;
      }
    }
  }
}
</style>
